<template>
  <div class="container">
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      :noRight="true"
      :noLeft="false"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="goBaCK"
      >上传图片</navbar
    >
    <div class="uploads">
      <el-upload
        ref="upload"
        class="upload-demo"
        drag
        accept="image/*"
        action="https://ds.pushiyixue.com/ds/upload/wx_appsupload"
        :data="uploadData"
        :file-list="fileList"
        :on-change="handleChange"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :show-file-list="true"
        :auto-upload="false"
        :on-remove="handleRemove"
        :on-preview="handlePreview"
        :before-remove="beforeRemove"
        list-type="picture"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          <em>
            <van-icon
              v-show="maxFlag"
              class="maxicon"
              size="0.16rem"
              name="warning-o"
            />
            <span class="tip-text">
              {{
                maxFlag
                  ? "注意：目前只能上传一张图片"
                  : "点击上传需要分析的图片"
              }}
            </span>
          </em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <p>只能上传一张jpg/png/jpeg图片,单张大小不能超过20MB</p>
          <p class="up-text">请选择上传方式</p>
          <van-radio-group
            class="up-radio"
            v-model="radio"
            direction="horizontal"
          >
            <van-radio name="0">手机拍照</van-radio>
            <van-radio name="1">电子胶片</van-radio>
            <van-radio name="2">dicom格式</van-radio>
          </van-radio-group>
        </div>
      </el-upload>
      <div class="up-box">
        <van-button
          :disabled="uploadFlag"
          class="up-btn"
          type="primary"
          round
          block
          @click="uploadClick"
          >提交分析
        </van-button>
        <van-button
          :disabled="uploadFlag"
          class="up-btn"
          type="primary"
          round
          color="#4775d9"
          size="small"
          @click="demoClick"
          block
          >上传示例
        </van-button>
        <van-button
          class="up-btn"
          :disabled="uploadFlag"
          type="info"
          @click="toDataList"
          size="small"
          round
          block
          >浏览图片
        </van-button>
      </div>
    </div>
    <van-popup
      closeable
      v-model="demoShow"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="fail-box">
        <p>错误示例</p>
        <span>1.图像反光</span>
        <van-image
          width="3rem"
          src="https://ds.pushiyixue.com/file/picdemo/1.png"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <span>2.图像模糊，反光</span>
        <van-image
          width="3rem"
          src="https://ds.pushiyixue.com/file/picdemo/4.png"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <span>3.图像边缘不齐</span>
        <van-image
          width="3rem"
          src="https://ds.pushiyixue.com/file/picdemo/5.jpg"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <p>正确示例</p>
        <van-image
          width="3rem"
          src="https://ds.pushiyixue.com/file/picdemo/6.jpg"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { uploadSet } from "@/api/upload";
import navbar from "@/components/navbar";
import { getUploadList } from "@/api/detailList.js";
import { mapGetters } from "vuex";
export default {
  name: "upload",
  components: { navbar },
  data() {
    return {
      fileList: [],
      uploadData: {
        maxid: new Date().getTime(),
      },
      userDatas: null,
      upIndex: 0,
      uname: "",
      uploadFlag: false,
      maxFlag: false,
      finishFlag: false,
      demoShow: false,
      radio: "",
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    // 返回上一页
    goBaCK() {
      this.$router.go(-1);
    },
    handleChange(file, fileList) {
      if (fileList.length == 1) {
        this.maxFlag = true;
      } else if (fileList.length > 1) {
        Toast.fail("目前只能上传一张图片");
        fileList.splice(fileList.length - 1, 1);
      }
      this.fileList = fileList;
      const reg = /\.(png|jpeg|jpg|dcm)(\?.*)?$/;
      fileList.forEach((item, index) => {
        if (reg.test(item.name)) {
          return true;
        } else {
          fileList.splice(index, 1);
          return false;
        }
      });
    },
    async handleSuccess(response, file, fileList) {
      this.upIndex++;
      // this.uploadFlag = true;
      if (this.upIndex == this.fileList.length) {
        let radios = this.radio;
        radios = Number(radios);
        let res = await uploadSet(this.uploadData.maxid, this.uname, radios);
        if (res.data.status == "200") {
          this.uploadFlag = false;
          this.upIndex = 0;
          this.finishFlag = true;
          Toast.success(`上传成功`);
          // this.finishFlag = true;
          // this.fileList = [];
          // this.$refs.upload.clearFiles();
        } else {
          Toast.fail(res.data.msg);
        }
      }
    },
    beforeUpload(file) {
      this.uploadFlag = true;
      let isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        Toast.setDefaultOptions({ duration: 2000 });
        Toast.fail("上传图片大小不能超过20MB");
        this.uploadFlag = false;
        this.maxFlag = false;
      }
      // return false
      return isLt20M;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    uploadClick() {
      console.log(this.radio.length);
      if (this.fileList.length == 0) {
        Toast.fail("请上传图片！");
      } else if (this.radio.length == 0) {
        Toast.fail("请选择上传方式！");
      } else {
        this.$refs.upload.submit();
      }
    },
    handlePreview(file) {
      // console.log(file);
    },
    beforeRemove(file, fileList) {
      console.log(fileList.length);
      if (fileList.length == 1) {
        this.maxFlag = false;
        this.finishFlag = false;
      }
      // console.log(file, fileList,2);
      // file.status = 'error';
      // return false;
    },
    //数据列表
    toDataList() {
      this.$router.push({ path: "/detailList" });
      // if (this.finishFlag) {
      //   getUploadList(this.uname).then((res) => {
      //     console.log(res.data.list[0].dsId);
      //     this.$router.push({
      //       path: "/lungDetail",
      //       query: { dsid: res.data.list[0].dsId },
      //     });
      //   });
      // } else {
      //   Toast.fail("请先上传图片");
      // }
    },
    // 示例
    demoClick() {
      this.demoShow = true;
    },
  },
  created() {
    this.userDatas = JSON.parse(this.userData);
    this.uname = this.userDatas.userName;
    // this.uploadData.maxid = this.nowTime;
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
}
.uploads {
  width: 95%;
  margin: 0 auto;
  margin-top: 0.1rem;
  & /deep/ .el-upload {
    width: 95%;
  }
  & /deep/ .el-upload-dragger {
    z-index: 1;
    width: 100%;
    height: 1.4rem;
  }
  & .up-box {
    position: fixed;
    bottom: 0.2rem;
    width: 95%;
  }
  & .up-btn {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.1rem;
  }
}
/deep/ .el-progress-bar {
  width: 95%;
}
/deep/ .el-upload-list {
  // height: 2.7rem;
  width: 90%;
  overflow-y: auto;
  margin: 0 auto;
  // margin-top: 0.1rem;
}
.maxicon {
  vertical-align: bottom;
}
/deep/ .el-upload-list__item {
  // font-size: 0.2rem;
}
.tip-text {
  font-size: 0.16rem;
}
.fail-box {
  margin-top: 0.5rem;
  & p {
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
    margin-top: 0.2rem;
  }
  & p:nth-of-type(1) {
    color: red;
  }
  & p:nth-of-type(2) {
    color: green;
  }
  & span {
    display: block;
    font-size: 0.14rem;
    text-align: left;
    margin-left: 0.2rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
  }
}
.up-text {
  font-size: 0.14rem;
  margin-top: 0.15rem;
  color: red;
  // text-align: ;
}
.up-radio {
  justify-content: center;
  margin-top: 0.08rem;
  font-size: 0.14rem;
}
/deep/ .el-upload-dragger .el-icon-upload {
  line-height: 0.28rem;
  font-size: 0.56rem;
}
</style>